//import logo from './logo.svg';
import './App.css';
import React from 'react';
import {
  BrowserRouter as Router,
  //Switch,
  Route,
  //Redirect,
  Routes,
  Outlet,
} from "react-router-dom";
import store from "./app/store";
import Navbar from './app/Navbar';
import { Counter }  from './features/counter/Counter';
//import { Navbar } from "./app/Navbar";
import PostsList from './features/posts/PostsList';
import SinglePostPage from './features/posts/SinglePostPage';
import EditPostForm from './features/posts/EditPostForm';
import { fetchUsers } from "./features/users/usersSlice";
import UsersList from './features/users/UsersList';
import UserPage from './features/users/UserPage';
import NotificationsList  from './features/notifications/NotificationsList';

store.dispatch(fetchUsers());

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          {/* <Navbar /> */}
          <Route path="/" element={<PostsList /> } />
          <Route path="/count" element={<Counter /> } />
          <Route path="/posts/:postId" element={<SinglePostPage />} />
          <Route path="/editPost/:postId" element={<EditPostForm />} />
          <Route path="/users" element={<UsersList />} />
          <Route path="/users/:userId" element={<UserPage />} />
          <Route path="/notifications"  element={<NotificationsList />}/>
        </Routes>
      </Router>
      <Outlet />
    </div>
  );
}

export default App;
